<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const app=Vue.createApp({
        data() {
            return {
                title:'hello Vue.js',
                likes:333,
                funVal:function(){
                    alert('abc')
                }
            }
        },
        template:`
        静态传值<test title="I am title"/>
        动态传值<test :like-val="likes" :fun-val="funVal"
        `
    })
    app.component('test',{
        props:{
             title:{
                 type:String,
                 default:'hello'
             },
             ids:{
                 type:Array,
                 default:function(){
                     return['A','B']
                 }
             },
             likeVal:{
                 type:Number,
                 default:function(){
                     return 1000
                 },
                 validor:function(){
                    console.log('likeVal -->'+value)
                    return value>1000
                 }
             },
             funVal:{
                 type:Function
             }
        },
        template:`
        <div @click="handleFun">{{title}}----{{likeVal}}---{{ids}}></div>
        <div>{{typeof title}}</div>`
        ,
        methods: {
            handleFun(){
                alert('DEF');
                this.funVal();
            }
        },
    })
    const vm=app.mount("#app")
</script>
</html>